import { createApp, ref, markRaw } from "vue";
import myLoad from "./createModal.vue";
import ElementPlus from "element-plus";
import uploader from "@/components/uploader.vue";
const title = ref("");
const component = ref<any>("");
const showFooter = ref(false);
const size = ref("30%");
const data = ref({});
let $message: any = {};
let show = (e: any) => {
  title.value = e.title;
  showFooter.value = e.showFooter;
  size.value = e.size ? e.size : "30%";
  data.value = e.data;
  if (e.component) {
    const propType = typeof e.component;
    if (propType == "string") {
      component.value = e.component;
    } else {
      component.value = markRaw(e.component);
    }
  } else {
    component.value = "";
  }
  $message = createApp(myLoad, {
    title: title.value,
    component: component.value,
    showFooter: showFooter.value,
    size: size.value,
    data: data.value,
    hide,
    handleClose: e.handleClose ? e.handleClose : () => {},
  })
    .use(ElementPlus)
    .component("uploader", uploader)
    .mount(document.createElement("div"));
  document.body.appendChild($message.$el);
};
let hide = () => {
  title.value = "";
  component.value = "";
  showFooter.value = false;
  size.value = "30%";
  data.value = {};
  document.body?.removeChild($message.$el);
};
const createModal = show;

export { createModal };
